<template>
  <br>
  <br>
  <br>
  <br>
  <br>
<h1>欢迎来到校园体育社</h1>
  <br>
  <br>
  <div class="middle">
    <ul>
      <li>
        <router-link :to="'/home/amusement/sporthome/sportclub1'">
          <img src="@/assets/imgs/sport1.jpg" width="400px" height="500px" style="border-radius: 10%">
          <h3>篮球社&gt;&gt;</h3>
        </router-link>
      </li>
      <li>
        <router-link :to="'/home/amusement/sporthome/sportclub2'">
          <img src="@/assets/imgs/sport2.jpg" width="400px" height="500px" style="border-radius: 10%">
          <h3>网球社&gt;&gt;</h3>
        </router-link>
      </li>
      <li>
        <router-link :to="'/home/amusement/sporthome/sportclub3'">
          <img src="@/assets/imgs/sport3.jpg" width="400px" height="500px" style="border-radius: 10%">
          <h3>足球社&gt;&gt;</h3>
        </router-link>
      </li>
    </ul>
  </div>
</template>

<script setup>

</script>


<style scoped>

.middle ul{
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  flex-wrap: wrap;
  justify-content: center; /* 水平居中 */
}
.middle ul li{
  margin:20px 100px;
  transform-origin: center;
  transition: transform 0.3s ease; /* 平滑过渡效果 */
  text-align: center; /* 文字居中 */
}
.middle ul li:hover {
  transform: scale(1.2);
}
</style>